<template>
    <div style="width: 100%;height: 100vh;overflow: hidden;background-color: #00e9ff">
        <div style="width: 300px;margin: 100px auto;text-align: center">
            <div style="color: #fdfdff;font-size: 30px;padding: 30px 0">欢迎注册</div>
            <el-form ref="form" :model="form" :rules="rules" label-width="normal">
                <el-form-item   prop="username">
                    <el-input prefix-icon="el-icon-user-solid" style="background-color: #ffffff" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password" >
                    <el-input prefix-icon="el-icon-lock" style="background-color: #ffffff" v-model="form.password" placeholder="请输入密码" show-password></el-input>
                </el-form-item>
                <el-form-item prop="confirm" >
                    <el-input prefix-icon="el-icon-lock" style="background-color: #ffffff" v-model="form.confirm" placeholder="请确认密码" show-password></el-input>
                </el-form-item>

                <el-form-item>
                    <div style="display: flex">
                        <el-input prefix-icon="el-icon-key" v-model="form.validCode" style="width: 50%;" placeholder="请输入验证码"></el-input>
                        <ValidCode @input="createValidCode" />
                    </div>
                </el-form-item>

                <el-button style="width: 100%" @click="register">注册</el-button>
            </el-form>
        </div>
    </div>
</template>
<script>
    import request from "../utils/request";
    import ValidCode from "@/components/ValidCode";
    export default {
        name: "Register",
        components: {
            ValidCode
        },
        data(){
            return{
                form:{},
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    confirm: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                },
                validCode: '',
                vedioCanPlay:false
            }
        },
        methods:{
            canplay() {
                this.vedioCanPlay = true
            },
            // 接收验证码组件提交的 4位验证码
            createValidCode(data) {
                this.validCode = data
            },
            register(){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (!this.form.validCode) {
                            this.$message.error("请填写验证码")
                            return
                        }
                        if(this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
                            this.$message.error("验证码错误")
                            return
                        }
                        if (this.form.password!=this.form.confirm){
                            this.$message({
                                type: "error",
                                message: "两次密码不一致！"
                            })
                            return
                        }
                        request.post("/user/register",this.form).then(res=>{
                            console.log(res)
                            if (res.code ==='-2'){
                                this.$alert("用户名已经存在！请重新注册！")
                                this.$router.push("/register")
                            }else if (res.code==='0'){
                                this.$message({
                                    type: "success",
                                    message: "注册成功！"
                                })
                                this.$router.push("/login")
                            }
                            else{
                                this.$message({
                                    type: "error",
                                    message: res.msg
                                })
                            }
                        })
                    }
                })

           }
        }
    }
</script>

<style scoped>

</style>